<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
		
		<script type="text/javascript" src="js/easyui/jquery.min.js"></script>
		<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
	</head>
	<body style="height: 2888px;">
		<div id="tb">
			<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="_append()"></a>
			<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="_removeit()"></a>
			<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="_accept()"></a>
		</div>
		<table id="dg" class="" style="width:100%;height:auto">
			<thead>
				<tr>
					<th data-options="field:'itemid',width:80,formatter:function(value,row){
				    return row.itemid;
				},
				op: ['equal', 'notequal', 'less', 'greater'],
				editor:{
				    type:'combogrid',
				    options:combogrid()
				}">Item
						ID</th>
					<th data-options="field:'productid',width:100">Product</th>
					<th data-options="field:'listprice',width:80,align:'right',formatter:function(value,row){
				    return row.listprice;
				},
				editor:{
				    type:'combobox',
				    options:combobox()
				}">ListPrice</th>
					<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
					<th data-options="field:'attr1',width:250">Attribute</th>
					<th data-options="field:'status',width:60,align:'center'">Status</th>
				</tr>
			</thead>
		</table>


	</body>
	
	<script type="text/javascript" src="js/easyui/datagrid-filter.js"></script>
	<script src="js/easyui-datagrid.v1.2.js"></script>
	<script src="js/easyui/easyui-lang-zh_CN.js"></script>

	<script>
		//过滤器的配置
		function filterConfig(){
			return [{
				field: 'listprice',
				type: 'numberbox',
				options: {
					precision: 1
				},
				op: ['equal', 'notequal', 'less', 'greater']
			}, {
				field: 'unitcost',
				type: 'numberbox',
				options: {
					precision: 1
				},
				op: ['equal', 'notequal', 'less', 'greater']
			}, {
				field: 'status',
				type: 'combobox',
				options: {
					panelHeight: 'auto',
					data: [{
						value: '',
						text: 'All'
					}, {
						value: 'P',
						text: 'P'
					}, {
						value: 'N',
						text: 'N'
					}],
					onChange: function(value) {
						if (value == '') {
							$("#dg").datagrid('removeFilterRule', 'status');
						} else {
							$("#dg").datagrid('addFilterRule', {
								field: 'status',
								op: 'equal',
								value: value
							});
						}
						$("#dg").datagrid('doFilter');
					}
				}
			}];
		}
		
		function combogrid() {
			var url = 'json/data.json';
			return {
				panelWidth: 320,
				panelMinWidth: '50%',
				idField: 'itemid',
				textField: 'itemids',
				mode: 'remote',
				url: url,
				method: 'get',
				required: true,
				striped: true,
				pageSize: 100,
				pageList: [100, 200, 300],
				pagination: true,
				columns: [
					[{
							field: 'itemid',
							title: '计划主键',
							width: 100
						},
						{
							field: 'listprice',
							title: '价格',
							width: 180
						},
					]
				],
				keyHandler: {
					query: function(keyword) {},
					up: function(keyword) {
					},
					down: function(keyword) {},
					enter: function(keyword) {
						//coding
					}
				}
			}
		}
		function combobox() {
			var url = 'json/combobox_data.json';
			return {
				url: url,
				method: 'get',
				valueField: 'id',
				textField: 'listprice',
				required: true,
				keyHandler: {
					query: function(keyword) {},
					up: function(keyword) {
					},
					down: function(keyword) {},
					enter: function(keyword) {
						//coding
					}
				}
			}
		}
		var easyGrid = new EasyGrid({
			collapsible:true,
			filterBtnIconCls: 'icon-filter',
			toolbar: "#tb", //操作工具条
			fitColumns: true,
			// filterMenu:false,//***作者新增属性 设置默认的语句菜单
			el: "#dg", //table id---***作者新增属性
			url: 'json/data.json', //后台访问地址
			// autoWidth:true,//***作者新增属性  宽度自动--autoWidth设置为true 会影响到fitColumns 宽度铺满 单元格铺满
			actionConfig: { //***作者新增属性  操作行
				need: true,
				// location: 0, //-1是最后
				field: 'action',
				width: 180,
				align: 'center',
				title: "action",
				fixed: true, //冻结行  此部分会排在行属性前面 由此属性location以冻结列为准
				// formatter:formatAction//不写按默认的来  写了按你的样式来
			},
			// columns: columns,
			// clickCellEdit: true,
			rownumbers: true,
			showFooter: true,
			//后面两项需要 引入datagrid-filter.js
			enableFilter:true,//***作者新增属性  开启过滤器
			filterConfig:filterConfig(), //***作者新增属性  过滤器的配置
			filterIngores:['action','itemid','productid'],//***作者新增属性  忽略过滤的字段 数组
			selectionMode:true
		});
	</script>

</html>